<script setup>
  import { defineProps, defineEmits, watch, ref } from 'vue'
  import CusDescriptions from './CusDescriptions.vue'
  import CusDescriptionsItem from './CusDescriptionsItem.vue'
  const props = defineProps({
    modelValue: {
      type: Boolean,
      default: false
    }
  })
  const emit = defineEmits(['update:modelValue'])

  const visible = ref(false)
  const formDataRef = ref(null)
  const formData = ref({
    cx: '',
    gx: '',
    device: ''
  })
  const formRules = {
    cx: [
      {
        required: true,
        message: '产线不能为空',
        trigger: 'change'
      }
    ],
    gx: [
      {
        required: true,
        message: '工序不能为空',
        trigger: 'change'
      }
    ],
    device: [
      {
        required: true,
        message: '设备不能为空',
        trigger: 'change'
      }
    ]
  }
  watch(
    () => props.modelValue,
    val => {
      visible.value = val
    }
  )
  async function save() {
    const result = await formDataRef.value.validate()
    console.log(result)
  }

  function cancel() {
    formDataRef.value.reset()
    emit('update:modelValue', false)
  }
</script>

<template>
  <byt-drawer v-model="visible" :footer="false">
    <template #header>
      <byt-header name="新增" :styles="{ justifyContent: 'space-between' }">
        <t-space :size="12">
          <t-button theme="primary" @click="save">保存</t-button>
          <t-button @click="cancel">关闭</t-button>
        </t-space>
      </byt-header>
    </template>
    <div class="drawer-content">
      <t-form
        ref="formDataRef"
        :data="formData"
        :rules="formRules"
        :label-width="0"
      >
        <h2 style="margin-bottom: 12px">基础信息</h2>
        <cus-descriptions :column="3" :label-style="{ width: '200px' }">
          <cus-descriptions-item label="产线">
            <t-form-item name="cx">
              <t-input v-model="formData.cx" borderless></t-input>
            </t-form-item>
          </cus-descriptions-item>
          <cus-descriptions-item label="工序">
            <t-form-item name="gx">
              <t-input v-model="formData.gx" borderless></t-input>
            </t-form-item>
          </cus-descriptions-item>
          <cus-descriptions-item label="设备">
            <t-form-item name="device">
              <t-input v-model="formData.device" borderless></t-input>
            </t-form-item>
          </cus-descriptions-item>
        </cus-descriptions>

        <h2 style="margin-bottom: 12px">基础信息</h2>
        <cus-descriptions :column="3">
          <cus-descriptions-item label="产线">
            <t-form-item name="cx">
              <t-input v-model="formData.cx" borderless></t-input>
            </t-form-item>
          </cus-descriptions-item>
          <cus-descriptions-item label="工序" :span="2">
            <t-form-item name="gx">
              <t-input v-model="formData.gx" borderless></t-input>
            </t-form-item>
          </cus-descriptions-item>
        </cus-descriptions>
      </t-form>
    </div>
  </byt-drawer>
</template>

<style lang="scss" scoped>
  .drawer-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: auto;
    padding: 16px;
    :deep(.t-descriptions__label) {
      text-align: center;
      color: #000;
      font-weight: bold;
      background: #f2f3f5;
    }

    :deep(.t-input__extra) {
      width: auto;
      position: absolute;
      top: -45px;
      left: 0;
      height: fit-content;
      background-color: rgba(29, 33, 41, 0.5);
      color: #fff;
      padding: 10px;
      font-size: 14px;
      border-radius: 4px;
      z-index: 9;
    }
  }
</style>
